<template>
  <div id="goods-list">
    <top-header :isRoute="isRoute" title="商品列表" />
   
    <mt-loadmore
      :autoFill="autoFill"
      :bottomAllLoaded="bottomAllLoaded"
      :bottomMethod="bottomMethod"
      :topMethod="topMethod"
      bottomLoadingText="玩命加载中..."
      bottomPullText="上拉加载"
      bottomDropText="松开即可"
      ref="loadmore"
    >
      <div class="goods-list-item" v-for="item in goodsList" :key="item.id">
        <router-link :to="{name:'goods-detail',params:{id:item.id}}">
          <div class="goods-item-img">
            <img :src="item.img_url" />
          </div>
          <div class="goods-item-info">
            <p class="title">{{item.title | strLimit(15)}}</p>
            <del class="market-price">原价：&yen;{{item.market_price}}</del>
            <p class="sell-price">现价：&yen;{{item.sell_price}}</p>
            <p class="stock-quantity">库存：{{item.stock_quantity}}</p>
          </div>
        </router-link>
      </div>
      <div
        v-if="bottomAllLoaded"
        style="width:100%;text-align:center;font-size:.8rem;"
      >我是有底线的！</div>
    </mt-loadmore>
  </div>
</template>
<script>
import "./index.less";
export default {
  data() {
    return {
      isRoute: true,
      autoFill: false,
      bottomAllLoaded: false,
      goodsList: [],
      pageindex: this.$route.params.pageindex
    };
  },
  methods: {
    bottomMethod() {
      this.$axios
        .get("getgoods?pageindex=" + this.pageindex)
        .then(res => {
          if (res.data.message.length <= 0) {
            this.bottomAllLoaded = true;
            this.$refs.loadmore.onBottomLoaded();
            return;
          }
          // this.goodsList = this.goodsList.concat(res.data.message);
          this.goodsList = [...this.goodsList, ...res.data.message];
          this.pageindex++;
          this.$refs.loadmore.onBottomLoaded();
        })
        .catch(err => console.log(err));
    },
    topMethod() {
      this.$axios
        .get("getgoods", {
          params: {
            pageindex: 1
          }
        })
        .then(res => {
          this.goodsList = res.data.message;
          this.$refs.loadmore.onTopLoaded();
          this.bottomAllLoaded = false;
          this.pageindex = 2;
        })
        .catch(err => console.log(err));
    }
  },
  created() {
    this.$axios
      .get("getgoods", {
        params: {
          pageindex: this.pageindex
        }
      })
      .then(res => {
        this.goodsList = res.data.message;
        this.pageindex++;
      })
      .catch(err => console.log(err));
  },
};
</script>
